<template>
	<view>
		<u-navbar title="我的声音" titleStyle="color:#fff;" :placeholder="true" leftIconColor="#fff" :autoBack="true" bgColor="#1F1F1F">
			
		</u-navbar>
		<view class="create_nav">
			<navigator class="item"  hover-class="none">
				<image class="ico" src="../../myPages/static/img/ico_21.png" mode="widthFix"></image>
				<view class="info">
					<view class="name">
						高保真剩余次数 {{userInfo.tk_vip_info.tk_voice_count||0}} 次
					</view>
				</view>
			</navigator>
		</view>
		
		<view v-if="listData.length == 0" class="list_none" >
			<image class="img" src="../static/img/ico_none.png" mode="widthFix"></image>
			<view class="text">暂未克隆形象</view>
		</view>
		
		<view v-else class="list_sound">
			<view class="item" v-for="(item,index) in listData" :key="index">
				<!--  @click="clickOnPlayAudio(item.demo_url)"  -->
				<!--  -->
				
				<image v-if="playIndex == index" @click="clickOnStopAudio()" class="ico" src="../../static/img/ico_stop.png" mode="widthFix"></image>
				<image v-else class="ico" @click="clickOnPlayAudio(item.demo_url, index)" src="../../static/img/ico_play.png" mode="widthFix"></image>
				
				<view v-if="item.title" class="name">
					{{item.title}}
				</view>
				<view v-else class="name">
					未命名
				</view>
				<view class="tag">
					<view class="tag_item yellow" v-if="item.is_public == 0">
						定制
					</view>
					<view class="tag_item" v-if="item.is_public == 1">
						公共
					</view>
					<view class="tag_item yellow" v-if="item.type == 20">
						高保真
					</view>
					<view class="tag_item yellow" v-if="item.type == 50">
						高保真
					</view>
					
					<!-- <view class="tag_item blue" v-if="item.status != 0">
						待确认
					</view> -->
					
					<view class="tag_item blue" v-if="item.status == 0">
						已确认
					</view>
					<view class="tag_item green" v-if="item.status == 1">
						训练完成
					</view>
					<view class="tag_item blue" v-if="item.status == 2">
						创建中
					</view>
					<view class="tag_item blue" v-if="item.status == 3">
						草稿
					</view>
					<view class="tag_item blue" v-if="item.status == 4">
						训练失败
					</view>
					
				</view>
				<view class="btn" @click="clickShowPower(item)">
					<u-icon name="more-dot-fill" color="#fff" size="32rpx" bold></u-icon>
				</view>
			</view>
		</view>
		
		<view class="footer_none"></view>
		<view class="footer_yellow_btn">
			
			<view class="item" @click="postVoiceCreate(50)">
				克隆高保真声音（VIP)
			</view>
		</view>
		
		<!-- 操作菜单 -->
		<u-popup :show="showPower" @close="closePower" @open="openPower" mode="bottom" bgColor="#2C2C2C" round="30rpx">
			<view class="power_sheet">
				<view class="item" v-for="(item,index) in listSheet" :key="index" @click="clickSheetPower(item.name)">
					{{item.name}}
				</view>
			</view>
		</u-popup>
		
		<!-- 重命名 -->
		<u-popup :show="showEntries" mode="center" bgColor="#484848" round="10rpx" :safeAreaInsetBottom="false" @close="closeEntries" @open="openEntries">
			<view class="entries_box">
				<view class="title">
					声音名称
				</view>
				<view class="entries_input">
					<u--input
						placeholder="请输入声音名称"
						border="none"
						v-model="newName"
						customStyle="background:#2C2C2C;padding:12rpx 20rpx;"
						placeholderStyle="color:#979797;"
						fontSize="26rpx"
						color="#fff"
					></u--input>
				</view>
				<view class="entries_box_btn">
					<view class="item" @click="showEntries = false">
						取消
					</view>
					<view class="item yellow" @click="reName()">
						提交
					</view>
				</view>
			</view>
		</u-popup>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isList: false,
				showPower: false,
				listSheet: [],
				userId:'',
				userInfo:{},
				listData:[],
				voiceId: '',
				voiceItem: {},
				innerAudioContext:null,
				newName:'',
				showEntries:false,
				playIndex: null
			}
		},
		onLoad() {
			this.userId = uni.getStorageSync('userId');
			console.log('onload_'+this.userId)
			this.userInfo = JSON.parse(uni.getStorageSync('userInfo'));
			this.updateUserdata()
			this.getVoiceList()
			
			// 播放声音管理器
			this.innerAudioContext = uni.createInnerAudioContext();
			this.innerAudioContext.onPlay(() => {
				console.log('开始播放');
			});
			this.innerAudioContext.onStop(() => {
				console.log('停止播放');
			});
			this.innerAudioContext.onEnded(() => {
				console.log('自然播放结束');
				this.playIndex = null
			});
			this.innerAudioContext.onError((res) => {
				console.log('播放音频错误', res.errMsg);
			});
		},
		onUnload(){
			console.log('后退');
			this.innerAudioContext.stop();
			this.innerAudioContext = null
			this.playIndex = null
		},
		onShow() {
			this.userId = uni.getStorageSync('userId');
			this.userInfo = JSON.parse(uni.getStorageSync('userInfo'));
			this.updateUserdata()
			this.getVoiceList()
		},
		methods: {
			updateUserdata(){
				uni.$u.http.post('/api/update_userdata/' + this.userId + '?from=miniprogram', {
					first_name: this.userInfo.first_name
				}).then(res => {
					console.log('更新用户资料----', res.data)
					uni.setStorageSync("userInfo", JSON.stringify(res.data.data));
					//uni.setStorageSync("token", resa.data.data.token);
					//uni.setStorageSync("isLogin", true);
					//uni.setStorageSync("userId", resa.data.data.user_id);
					this.userInfo = res.data.data
					// uni.reLaunch({
					// 	url: "/myPages/create/create"
					// })
				}).catch(err => {
					console.log(err)
				})
			},
			// 重命名
			reName(){
				if(!this.newName)
				{
					uni.showToast({
						title: '请输入声音名称',
						duration: 2000,
						icon: 'none'
					});
					return
				}
				uni.$u.http.post('/api/speed_voice_update/'+this.userId +'?from=miniprogram', {
					id: this.voiceId,
					title: this.newName
				}).then(res => {
					console.log('删除声音-----',res.data)
					this.showEntries = false
					this.getVoiceList()
				}).catch(err => {
					console.log(err)
				})
			},
			// 播放声音
			clickOnPlayAudio(url,index){
				console.log('播放--声音' );
				//mp3文件不能播放，推荐amr
				if(url.indexOf('.mp3', 0) != -1){
					uni.showToast({
						title: '音频格式错误，推荐amr',
						duration: 2000,
						icon: 'none'
					})
					return
				}
				this.innerAudioContext.stop();
				if(!url){
					this.playIndex = null
					return
				}
				
				this.innerAudioContext.src = url;
				console.log(this.innerAudioContext.src, '-音频地址-');
				this.innerAudioContext.play();
				this.playIndex = index
			},
			// 停止声音
			clickOnStopAudio(){
				this.innerAudioContext.stop();
				this.playIndex = null
			},
			// 删除声音
			delVoice(){
				const that = this
				uni.showModal({
					title: '提示',
					content: '确定删除吗？删除后无法恢复。',
					success: function (resp) {
						if (resp.confirm) {
							console.log('/api/speed_voice_update/'+that.userId +'?from=miniprogram')
							uni.$u.http.post('/api/speed_voice_update/'+that.userId +'?from=miniprogram', {
								id: that.voiceId,
								is_del: 1
							}).then(res => {
								console.log('删除声音-----',res.data)
								that.getVoiceList()
							}).catch(err => {
								console.log(err)
							})
						}
					},
				});
			},
			// 确认声音
			postVoiceConfirm(id){
				uni.$u.http.post('/api/speed_voice_submit/'+this.userId +'?from=miniprogram', {
					id: this.voiceId
				}).then(res => {
					console.log('确认声音-----',res.data)
					this.getVoiceList()
				}).catch(err => {
					console.log(err)
				})
			},
			// 创建声音 声音类型
			// 9:声音克隆基础版
			// 10:公版声音
			// 20:高保真
			// 50:高保真
			postVoiceCreate(type){
				if(type == 20){
					//次数不够	
					if(this.userInfo.tk_vip_info.tk_voice_count < 1){
						uni.showToast({
							title: '权益次数不足',
							duration: 2000,
							icon: 'none'
						});
						return
					}
				}
				if(type == 50){
					//次数不够	
					if(this.userInfo.tk_vip_info.tk_voice_count < 1){
						uni.showToast({
							title: '权益次数不足',
							duration: 2000,
							icon: 'none'
						});
						return
					}
				}
				
				uni.navigateTo({
					url: '/soundPages/addSound/addSound?voiceType='+ type
				})
			},
			getVoiceList(){
				uni.$u.http.get('/api/speed_voice_list/'+this.userId +'?from=miniprogram&count=999').then(res => {
					console.log('我的声音-----',res.data.data)
					this.listData = res.data.data
				}).catch(err => {
					console.log(err)
				})
			},
			
			clickShowPower(item){
				this.voiceId = item.id
				this.voiceItem = item
				this.newName = item.title
				// remained_times 高保真修改次数
				if(item.status == 0){
					this.listSheet = [
						{
							name: '重命名',
						},
						{
							name: '删除'
						},
						{
							name: '取消'
						}
					]
				}
				else{
					if( (item.type == 20 || item.type == 50)  && item.remained_times > 0){
						this.listSheet = [
							{
								name: '确认生成',
							},
							{
								name: '修改'
							},
							{
								name: '删除'
							},
							{
								name: '取消'
							}
						]
					}
					else if((item.type == 20 || item.type == 50)  && item.remained_times == 0){
						this.listSheet = [
							{
								name: '确认生成',
							},
							{
								name: '删除'
							},
							{
								name: '取消'
							}
						]
					}
				}
				
				this.showPower = true
			},
			clickSheetPower(name){
				if(name == '修改'){
					uni.navigateTo({
						url: '/soundPages/addSound/addSound?step=3&voiceId='+this.voiceId
					});
				}
				else if(name == '删除'){
					this.delVoice()
				}
				else if(name == '确认生成'){
					this.postVoiceConfirm()
				}
				else if(name == '重命名'){
					this.showEntries = true
					//this.reName()
				}
				this.showPower = false
			},
			openPower() {
				// console.log('open');
			},
			closePower() {
				this.showPower = false
				// console.log('close');
			},
			openEntries() {
				// console.log('open');
			},
			closeEntries() {
				this.showEntries = false
				// console.log('close');
			},
		}
	}
</script>

<style lang="scss" scoped>
.entries_box{
	width: 670rpx;
	.entries_input{
		padding:0 40rpx 40rpx;
	}
	.entries_box_btn{
		border-top:1rpx solid #585858;
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding:0 30rpx;
		.item{
			width: 50%;
			text-align: center;
			line-height: 100rpx;
			font-size: 26rpx;
			font-weight: 600;
			line-height: 40rpx;
			color: #959595;
			&.yellow{
				color: #FFB200;
			}
		}
	}
	.title{
		text-align: center;
		font-size: 28rpx;
		font-weight: normal;
		line-height: 40rpx;
		color: #FFFFFF;
		padding:30rpx 0;
	}
}


.create_nav{
	margin: 0 40rpx;
	height: 100rpx;
	border-radius: 10rpx;
	background: #2C2C2C;
	display: flex;
	align-items: center;
	justify-content: space-between;
	position: relative;
	.item{
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		box-sizing: border-box;
		padding:0rpx 40rpx;
		.ico{
			flex-shrink: 0;
			width: 50rpx;
			height: 50rpx;
			margin-right: 20rpx;
		}
		.info{
			width: 100%;
			.name{
				font-size: 30rpx;
				font-weight: 500;
				line-height: 36rpx;
				text-align: justify;
				color: #999999;
			}
			.text{
				font-size: 18rpx;
				font-weight: normal;
				line-height: 26rpx;
				text-align: justify;
				color: #999999;
			}
		}
	}
}

.power_sheet{
	padding:20rpx;
	width: 100%;
	box-sizing: border-box;
	.item{
		color:#fff;
		font-size: 26rpx;
		font-weight: 600;
		line-height: 40rpx;
		text-align: center;
		padding:30rpx;
	}
}
.list_sound{
	padding:0 40rpx;
	.item{
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 92rpx;
		border-radius: 15rpx;
		background: #2C2C2C;
		box-shadow: 2px 2px 30px 0px rgba(0, 0, 0, 0.05);
		margin: 20rpx 0;
		padding:0 20rpx;
		.ico{
			flex-shrink: 0;
			width: 44rpx;
			height: 44rpx;
			margin-right: 15rpx;
		}
		.name{
			width: 100%;
			font-size: 26rpx;
			font-weight: 600;
			line-height: 40rpx;
		}
		.tag{
			flex-shrink: 0;
			margin-left: auto;
			display: flex;
			align-items: center;
			padding-right: 14rpx;
			.tag_item{
				margin-left: 14rpx;
				flex-shrink: 0;
				height: 36rpx;
				border-radius: 8rpx;
				background: #4B4B4B;
				
				font-size: 20rpx;
				font-weight: normal;
				line-height: 36rpx;
				padding:0 14rpx;
				&.yellow{
					background: #FFE48D;
					color: #3D3D3D;
				}
				&.blue{
					background: #B3E0FF;
					color: #0062A5;
				}
				&.green{
					background: greenyellow;
					color: green;
				}
			}
		}
		.btn{
			flex-shrink: 0;
			width: 72rpx;
			height: 50rpx;
			border-radius: 25rpx;
			background: #4B4B4B;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
}
.footer_none{
	width: 100%;
	height: 160rpx;
}
.footer_yellow_btn{
	position: fixed;
	left:40rpx;
	right: 40rpx;
	bottom: 60rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	.item{
		width: 100%;
		border-radius: 35rpx;
		background: #F9BE01;
		line-height: 70rpx;
		text-align: center;
		font-size: 26rpx;
		font-weight: normal;
		color: #292D32;
		border: 2rpx solid #1F1F1F;
		&.hover{
			color: #F9BE01;
			background: #1F1F1F;
			border: 2rpx solid #F9BE01;
		}
	}
}
.list_none{
	text-align: center;
	padding:400rpx 0 0;
	.img{
		display: block;
		width: 470rpx;
		margin: 0 auto;
	}
	.text{
		display: block;
		font-size: 24rpx;
		line-height: 36rpx;
		text-align: justify;
		color: #A6A6A6;
		text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2613);
		text-align: center;
		padding:40rpx 0 0;
	}
}
</style>
